<template>
  <div class="nav" @touchstart="handletouchstart"
      @touchmove="handletouchmove"
      @touchend="handletouchend">
      <div class="bottom_content">
      <span @click="$router.push('WeChat')">微信</span>
      <span @click="$router.push('TongXunLu')">通讯录</span>
      <span @click="$router.push('search')">发现</span>
      <span @click="$router.push('Me')">我</span>
    </div>
    <transition  :name="transitionName">
      <router-view class="views" ></router-view>
    </transition>
    </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        transitionName:'',
        startTx: 0, //初始距离
        endTx: 0, // 结束后的距离
        distance: 0, // 滑动距离 初始距离减去结束距离
      }
    },
    methods:{
      handletouchstart(e) {
        this.startTx = e.touches[0].clientX; //初始的位置
      },
      handletouchmove(e) {
        this.endTx = e.changedTouches[0].clientX; // 结束的位置
      this.distance = this.startTx - this.endTx; // 滑动的距离
      },
      handletouchend(e) {
         console.log(this.distance>0?'左滑':'右滑')
         if (this.distance>0) {
           this.$router.push('TongXunLu')
           this.transitionName = 'slide-left'
         } else {
            this.$router.push('WeChat')
             this.transitionName = 'slide-right'
         }
         this.startTx = 0
         this.endTx = 0
      }
    }
  }
</script>

<style lang="less" scoped>
  .nav {
    overflow: hidden;
   height: 100%;
   position: relative;
  .bottom_content {
     position: absolute;
  bottom: 0;
    width: 100%;
    height: 60px;
    display: flex;
    // flex: 1;
    line-height: 60px;
    span {
      background: #f7f7f7;
      text-align: center;
      flex: 1;
      font-size: 20px;
      // border-color: #fff;
    }
    span:hover {
          background-color: #07c160;
      }
  }
}
.views {
  position: absolute;
  width: 100%;
  transition: all 6s ease;
  top: 0;
 }
.slide-left-enter-active {
  transition: all .3s ease;
}
.slide-left-leave-active {
  transition: all .3s ease;
}
.slide-left-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-leave-to {
 transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-active {
  transition: all .3s ease;
}
.slide-right-leave-active {
  transition: all .3s ease;
}
.slide-right-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>